<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="成都" name="202201">
                成都
                <!-- 房源 -->
                <div class="recommendBox">
                    <div v-for="(item, index) in houseList" :key="index" class="recommendHouse" @click="getInfo(item)">
                        <img :src="item.imageUrl" :alt="item.address" />
                        <div class="recommendHouseInfo">
                            <el-avatar size="large" :src="item.imageUrl" class="recommendUserAvatar">
                            </el-avatar>
                            <!-- 展示用户名 -->
                            <span style="margin-left: -40px;" name="userName">
                                {{ userName }}
                            </span>
                            <div style="float: right; margin-right: 2px;">月租:{{ item.price }}RMB/月</div>
                        </div>
                    </div>
                </div>
                <!-- 房源 -->
            </el-tab-pane>
            <el-tab-pane label="重庆" name="202202">
                重庆
                <!-- 房源 -->
                <div class="recommendBox">
                    <div v-for="(item, index) in houseList" :key="index" class="recommendHouse" @click="getInfo(item)">
                        <img :src="item.imageUrl" :alt="item.address" />
                        <div class="recommendHouseInfo">
                            <el-avatar size="large" :src="item.imageUrl" class="recommendUserAvatar">
                            </el-avatar>
                            <!-- 展示用户名 -->
                            <span style="margin-left: -40px;" name="userName">
                                {{ userName }}
                            </span>
                            <div style="float: right; margin-right: 2px;">月租:{{ item.price }}RMB/月</div>
                        </div>
                    </div>
                </div>
                <!-- 房源 -->
            </el-tab-pane>
            <el-tab-pane label="北京" name="202203">
                北京
                <!-- 房源 -->
                <div class="recommendBox">
                    <div v-for="(item, index) in houseList" :key="index" class="recommendHouse" @click="getInfo(item)">
                        <img :src="item.imageUrl" :alt="item.address" />
                        <div class="recommendHouseInfo">
                            <el-avatar size="large" :src="item.imageUrl" class="recommendUserAvatar">
                            </el-avatar>
                            <!-- 展示用户名 -->
                            <span style="margin-left: -40px;" name="userName">
                                {{ userName }}
                            </span>
                            <div style="float: right; margin-right: 2px;">月租:{{ item.price }}RMB/月</div>
                        </div>
                    </div>
                </div>
                <!-- 房源 -->
            </el-tab-pane>
            <el-tab-pane label="深圳" name="202204">
                深圳
                <!-- 房源 -->
                <div class="recommendBox">
                    <div v-for="(item, index) in houseList" :key="index" class="recommendHouse" @click="getInfo(item)">
                        <img :src="item.imageUrl" :alt="item.address" />
                        <div class="recommendHouseInfo">
                            <el-avatar size="large" :src="item.imageUrl" class="recommendUserAvatar">
                            </el-avatar>
                            <!-- 展示用户名 -->
                            <span style="margin-left: -40px;" name="userName">
                                {{ userName }}
                            </span>
                            <div style="float: right; margin-right: 2px;">月租:{{ item.price }}RMB/月</div>
                        </div>
                    </div>
                </div>
                <!-- 房源 -->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    name: "IResource",
    data() {
        return {
            activeName: '202201',
            userName: "可可今天不吃肉",
            carouselImg: [
                { itemImg: require("../../assets/carousel_1.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_6.jpg"), itemTitle: "" },
            ],
            houseList: []
        };
    },
    methods: {
        handleClick(tab, event) {
            this.initHouseList();
        },
        getInfo(item) {
            this.$router.push("/yunye/houseinfo?id=" + item.id);
        },
        initHouseList() {
            let self = this;
            this.axios({
                url: "http://127.0.0.1:8000/api/house/queryHouses/" + this.activeName,
                method: "get",
            }).then(function (response) {
                console.log(response.data);
                self.houseList = response.data;
                
            }).catch(function (error) {
            });
        }
    },
    mounted: function () {
        this.initHouseList();
    }
};
</script>

<style scoped>

</style>